<template>
  <div class="question-answer">
    <div class="question-header">
      <div class="question-icon-wrap">
        <span class="question-icon"></span>
      </div>
      <p class="question-title">问答记录</p>
    </div>
    <div id="questionAnswerScrollWrap" class="question-body">
      <ul id="questionAnswerWrap" class="question-answer-ul"></ul>
    </div>
  </div>
</template>

<script>
import Render from '@views/live/cc/common/render'
import Component from '@views/live/cc/common/component'
import Utils from '@views/live/cc/common/utils'
export default {
  data() {
    return {
      render: new Render(),
      component: new Component(),
      HDScene: window.replayHDScene
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.HDScene.onQuestions(data => {
        this.addQuestions(data)
        Utils.log('onQuestions', data)
      })
      this.HDScene.onAnswers(data => {
        this.addAnswers(data)
        Utils.log('onAnswers', data)
      })

      let questionAnswerScrollWrap = this.render.getNode('questionAnswerScrollWrap')

      this.component.bind(questionAnswerScrollWrap, 'mouseleave', () => {
        this.isScroll = true
      })
      this.component.bind(questionAnswerScrollWrap, 'mouseenter', () => {
        this.isScroll = false
      })
      this.HDScene.on('switch', () => {
        this.scrollTopQuestionAnswer()
      })
    },
    addQuestions(data) {
      let questionTemplate = `
      <li id="${data.id}" class="question-answer-wrap" style="display: ${
        data.isPublish ? 'block' : 'none'
      }">
        <div class="question-wrap">
          <p class="question-name">${data.userName}：</p>
          <p class="question-content">${data.content}</p>
        </div>
      </li>
    `
      let questionAnswerWrap = this.render.getNode('questionAnswerWrap')
      this.render.appendChild(questionAnswerWrap, questionTemplate)
      this.scrollTopQuestionAnswer()
    },
    addAnswers(data) {
      let answerTemplate = `
       <div class="anwser-wrap" style="display: ${data.isPrivate ? 'none' : 'block'}">
          <span class="anwser-arrows"></span>
          <div class="anwser-box">
            <p class="anwser-name">${data.userName}:</p>
            <p class="anwser-content">${data.content}</p>
          </div>
        </div>
    `
      let questionNode = this.render.getNode(data.questionId)
      this.render.appendChild(questionNode, answerTemplate)
      this.scrollTopQuestionAnswer()
    },
    scrollTopQuestionAnswer() {
      if (!this.isScroll) {
        return false
      }
      let questionAnswerScrollWrap = this.render.getNode('questionAnswerScrollWrap')
      let scrollHeight = questionAnswerScrollWrap.scrollHeight
      questionAnswerScrollWrap.scrollTop = scrollHeight
    }
  }
}
</script>

<style lang="scss">
@import './questionAnswer.scss';
</style>
